<template>
  <div class="loginContainer">
    <div class="login-form">
        <h3>登录</h3>
        <form :model="loginForm">
          <div class="inputSectionAcc">
              <el-input v-model="loginForm.account" placeholder="请输入账号" />
          </div>      
          <div class="inputSectionPwd">
            <el-input v-model="loginForm.password" id="pwdText" placeholder="请输入密码" show-password @keydown.enter="loginRequest"/>
          </div>
        </form>
        <div :style="tipStyle">{{ tip }}</div>
        <button class="btn" @click="loginRequest" id="login">登录</button>
        <button class="btn" @click="toSignupView" id="signup">注册</button>
    </div>
    <div class="sysName">
      社团管理系统
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import api from '@/api';
import userStore from '@/stores/store';
import router from '@/router';

const loginForm = reactive({
  account:'',
  password:''
});
const tip = ref('');
const tipStyle = reactive({
  'color': 'red',
  'font-size': '12px',
  'height': '20px',
  'text-align': 'left',
  'padding-left': '40px',
  'margin-bottom': '5px'
})
const store = userStore();

async function loginRequest(){
  if(loginForm.account != "" && loginForm.password != ""){
    tipStyle.color='black'
    tip.value = "登录中..."
    const result = await api.login(loginForm);
    //console.log('输出',result); //debug
    switch(result[0])
    {
      case 0:
        await loginHandle(result[1]);
        break;
      case 1:
        tipStyle.color='red'
        tip.value = "服务器响应错误，代码:"+result[1].status+"，请再次尝试";
        break;
      case 2:
        tipStyle.color='red'
        tip.value = "连接服务器失败,请检查网络";
        break;
      case 3:
        tipStyle.color='red'
        tip.value = "请求发送失败";
        break;
    }
  }
  else{
    tipStyle.color = 'red';
    tip.value = "账号密码不能为空！";
  } 
}
async function loginHandle(result){
  //console.log(result.data); //debug
  const data=result.data;
  if(data.code == 0){
    tipStyle.color = 'red';
    tip.value = "账号或密码错误";
    return;
  }
  else{
    //console.log(data.data); //debug
    store.setJWT(data.data);
    if(store.getJWT != ''){
      tipStyle.color = 'black';
      tip.value = '登录成功，正在跳转..';
      //console.log(store.getJWT); //debug
      const res = await getPermission();
      if(!res){
        tipStyle.color = 'red';
        tip.value = "获取状态失败！";
        return;
      }
      router.push('/homepage');
    }
  }
}
function toSignupView(){
  router.push('/signup')
}
async function getPermission(){
  const result = await api.getPermission();
  if(result[0] == 0){
    if(result[1].data.code == 1){
      store.setPermission(result[1].data.data.permission);
      //console.log(result[1].data.data.permission);
      return true;
    }
    else{
      return false;
    }
  }
  else{
    return false
  }
}
</script>

<style scoped>
.loginContainer{
  width: 100vw;
  height: 100vh;
  background-image: url('../img/bkgd.jpg');
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position: center;
  background-size: cover;
}
.login-form{
  width: 380px;
  height: 420px;
  border: 1px solid #e6e6e6;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 1px #5f5f5f;
  position: absolute;
  top: 19%;
  right: 10%;
  background-color: rgba(255, 255, 255, 20);
}
h3{
  font-family: '黑体';
  text-align: center;
  margin-top: 60px;
  margin-bottom: 30px;
}
.inputSectionAcc{
  height: 55px;
}
.inputSectionPwd{
  height: 45px;
}
.el-input{
  height: 40px;
  width: 300px;
  border-radius: 4px;
  border: 1px solid #b6b6b6;
}
.btn{
  height: 40px;
  width: 300px;
  margin-top: 10px;
  border: none;
  border-radius: 5px;
}
#login{
  background-color: #3D82FA;
  color: #FFF;
}
#signup{
  color: #3D82FA;
  border: 2px solid #3D82FA;
  background-color: #FFF;
}
.sysName{
  color: #ffffff;
  position: absolute;
  font-size: 50px;
  font-family: "楷体";
  user-select: none;
  margin-left: 100px;
  margin-top: 40px;
  font-weight: 700;
  text-shadow: 0px 0px 5px #414141;
}
</style>

